<template>
   <div class="play">
       <audio ref="myaudio" src="http://www.0dutv.com/plug/down/up2.php/231571087.mp3"></audio>
       <div class="song_img">
           <img src="/static/img/disc-ip6.png" alt="">
           <img :class="[isPlay?'activeImg':'stopImg']" :src="songInfo.al.picUrl" alt="">
       </div>
       <button @click="playAudio">{{isPlay?'暂停':'播放'}}</button>
       <div class="back" @click="goBack">&lt;</div>
   </div>
</template>
   
<script>
   export default {
       data () {
           return {
               songUrl:'',//音乐的可播放链接地址
               songInfo:{},//音乐相关信息
               isPlay:false,//音乐播放状态
           }
       },
       mounted() {
           /**
            * 音乐的可播放链接地址
            * this.songUrl = 'https://music.163.com/song/media/outer/url?id='+this.$route.params.id+'.mp3'
            * this.songUrl = 'http://www.0dutv.com/plug/down/up2.php/231571087.mp3';
            */
            this.$axios.get('/music/song/detail?ids='+this.$route.params.id).then((res) => {
                console.log(res)
                this.songInfo = res.data.songs[0]
            }).catch((error) => {
                console.log(error);
            });
       },
       methods:{
           playAudio(){
               var audio = this.$refs.myaudio;
               if(this.isPlay){
                    audio.pause();
               }else{
                    audio.play();
               }
               this.isPlay = !this.isPlay;
           },
           goBack(){
               this.$router.go(-1);
           }
       }
   }
</script>
   
<style scoped>
   .play{
        width: 100vw;
        height: 100vh;
        background-color: #666;
        text-align: center;
        overflow: hidden;
   }
   .song_img{
       position: relative;
       height: 6rem;
       margin-top: .6rem;
   }
   .song_img img:nth-of-type(1){
       width: 5.8rem;
       height: 5.8rem;
   }
   .song_img img:nth-of-type(2){
       width: 3.8rem;
       height: 3.8rem;
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%,-52%) rotate(0deg);
       border-radius: 50%;
   }
   button{
       font-size: .36rem;
       padding: .2rem .4rem;
   }
   .activeImg{
       animation: circle 5s linear infinite;
   }
   .stopImg{
       animation: circle 5s linear infinite;
       animation-play-state: paused;
   }
   @keyframes circle {
        0%{
            transform: translate(-50%,-52%) rotate(0deg)
        }
        100%{
            transform: translate(-50%,-52%) rotate(360deg)
        }
    }
    .back{
        width: 1rem;
        height: 1rem;
        background: rgba(0, 0, 0, .2);
        position: absolute;
        left: .2rem;
        top: .2rem;
        font-size: .6rem;
        display: flex;
        justify-content: center;
        align-items: center;
        color: rgb(233, 229, 229);
    }
</style>